<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 001</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
    <div id="myApp">
        <h1>{{ html }}</h1>
        <span :title="span_title">
            {{nihao}}
        </span>
        <p v-if="seen">现在你看到我了</p>
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
        <button @click='abboneli'>增加一行</button>
        <button @click='abb'>删除一行</button>
        <p>{{ Vue }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
        <p>{{ input_content }}</p>
        <input v-model="input_content">
        <div>点击了{{dianji.num}}次</div>
        <button @click="dianji.num++">点击加</button>
        <button @click="dianji.num--">点击减</button>
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:aaa="item.id"></todo-item>
        </ol>
    </div>
    <div>

    </div>
</body>
<script>
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义 attribute。
        // 这个 prop 名为 todo。
        props: ['todo','aaa'],
        template: '<li>ID 是{{aaa}}{{ todo.text }}</li>'
    })
    var app = new Vue({
        el: '#myApp',
        data: {
            html: '这是H1的文本内容!',
            nihao: '鼠标悬停几秒钟查看此处动态绑定的提示信息！',
            span_title: '页面加载于 ' + new Date().toLocaleString(),
            seen: true,
            dianji: {
                num: 1314520
            },
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ],
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '随便其它什么人吃的东西' }],
            Vue: 'Hello Vue.js!',
            input_content: 'Hello Vue!'
        },
        methods: {
            reverseMessage: function () {
                this.Vue = this.Vue.split('').reverse().join('')
            },
            abboneli: function () {
                this.todos.push({ text: '这是增加' })
            },
            abb: function () {
                this.todos.pop(1)
            }
        }
    })
</script>

</html>